<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>家庭记账本 - 总账单</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
    <style>
        .sidebar {
            min-height: 100vh;
            background-color: #f8f9fa;
            padding: 20px;
        }
        .main-content {
            padding: 20px;
        }
        .chart-container {
            position: relative;
            margin: auto;
            height: 300px;
            width: 100%;
            margin-bottom: 20px;
        }
        .summary-card {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <c:set var="user" value="${sessionScope.user}" />
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar -->
            <div class="col-md-2 sidebar">
                <h3 class="mb-4">家庭记账本</h3>
                <div class="list-group">
                    <a href="profile" class="list-group-item list-group-item-action">个人中心</a>
                    <a href="dashboard" class="list-group-item list-group-item-action active">总账单</a>
                    <a href="transactions" class="list-group-item list-group-item-action">收支记录</a>
                    <c:if test="${user.isAdmin()}">
                        <a href="users" class="list-group-item list-group-item-action">用户管理</a>
                    </c:if>
                    <a href="logout" class="list-group-item list-group-item-action text-danger">退出登录</a>
                </div>
            </div>

            <!-- Main Content -->
            <div class="col-md-10 main-content">
                <!-- 用户信息展示 -->
                <div class="alert alert-info mb-3" style="padding: 8px 16px;">
                    当前账号：<strong>${user.username}</strong>，姓名：<strong>${user.name}</strong>，身份：
                    <strong>
                        <c:choose>
                            <c:when test="${user.role eq 'GOD'}">超级管理员</c:when>
                            <c:when test="${user.role eq 'ADMIN'}">管理员</c:when>
                            <c:otherwise>普通用户</c:otherwise>
                        </c:choose>
                    </strong>
                </div>
                <h2 class="mb-4">总账单</h2>
                
                <!-- Summary Cards -->
                <div class="row">
                    <div class="col-md-4">
                        <div class="card summary-card">
                            <div class="card-body">
                                <h5 class="card-title">本月总收入</h5>
                                <h3 class="text-success">¥${monthlyIncome}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card summary-card">
                            <div class="card-body">
                                <h5 class="card-title">本月总支出</h5>
                                <h3 class="text-danger">¥${monthlyExpense}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card summary-card">
                            <div class="card-body">
                                <h5 class="card-title">本月结余</h5>
                                <h3 class="text-primary">¥${monthlyBalance}</h3>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Charts -->
                <div class="row mt-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">收入分类占比</h5>
                                <div class="chart-container">
                                    <canvas id="incomeChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">支出分类占比</h5>
                                <div class="chart-container">
                                    <canvas id="expenseChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 每日收支柱状图 -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">每日收支柱状图</h5>
                                <div class="chart-container">
                                    <canvas id="dailyBarChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Monthly Trend -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">月度收支趋势</h5>
                                <div class="chart-container">
                                    <canvas id="trendChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 每人总收支柱状图 -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">每人总收支柱状图</h5>
                                <div class="chart-container">
                                    <canvas id="userTotalBarChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Income Chart
        new Chart(document.getElementById('incomeChart'), {
            type: 'pie',
            data: {
                labels: ${incomeCategories},
                datasets: [{
                    data: ${incomeData},
                    backgroundColor: [
                        '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107',
                        '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    datalabels: {
                        color: '#fff',
                        font: { weight: 'bold', size: 14 },
                        formatter: function(value, context) {
                            const data = context.chart.data.datasets[0].data;
                            const total = data.reduce((a, b) => a + b, 0);
                            const percent = total ? (value / total * 100).toFixed(1) : 0;
                            return percent + '%';
                        }
                    }
                }
            },
            plugins: [ChartDataLabels]
        });

        // Expense Chart
        new Chart(document.getElementById('expenseChart'), {
            type: 'pie',
            data: {
                labels: ${expenseCategories},
                datasets: [{
                    data: ${expenseData},
                    backgroundColor: [
                        '#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5',
                        '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    datalabels: {
                        color: '#fff',
                        font: { weight: 'bold', size: 14 },
                        formatter: function(value, context) {
                            const data = context.chart.data.datasets[0].data;
                            const total = data.reduce((a, b) => a + b, 0);
                            const percent = total ? (value / total * 100).toFixed(1) : 0;
                            return percent + '%';
                        }
                    }
                }
            },
            plugins: [ChartDataLabels]
        });

        // Trend Chart
        new Chart(document.getElementById('trendChart'), {
            type: 'line',
            data: {
                labels: ${monthLabels},
                datasets: [{
                    label: '收入',
                    data: ${monthlyIncomeData},
                    borderColor: '#4CAF50',
                    fill: false
                }, {
                    label: '支出',
                    data: ${monthlyExpenseData},
                    borderColor: '#F44336',
                    fill: false
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // 每日收支柱状图
        new Chart(document.getElementById('dailyBarChart'), {
            type: 'bar',
            data: {
                labels: ${dailyLabels},
                datasets: [
                    {
                        label: '收入',
                        data: ${dailyIncomeData},
                        backgroundColor: 'rgba(76, 175, 80, 0.7)'
                    },
                    {
                        label: '支出',
                        data: ${dailyExpenseData},
                        backgroundColor: 'rgba(244, 67, 54, 0.7)'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: { beginAtZero: true }
                }
            }
        });

        // 每人总收支柱状图
        new Chart(document.getElementById('userTotalBarChart'), {
            type: 'bar',
            data: {
                labels: ${userTotalLabels},
                datasets: [
                    {
                        label: '总收入',
                        data: ${userTotalIncomeData},
                        backgroundColor: 'rgba(76, 175, 80, 0.7)'
                    },
                    {
                        label: '总支出',
                        data: ${userTotalExpenseData},
                        backgroundColor: 'rgba(244, 67, 54, 0.7)'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: { beginAtZero: true }
                }
            }
        });
    </script>
</body>
</html> 